<template>
  <div v-if="!loading" class="statistics-member" style="min-height: 400px;">
    <div class="common-form">会员统计</div>
    <div class="d-s-stretch bd-box">
      <div class="d-s-c d-c left-box">
        <!--汇总-->
        <Total v-if="!loading" />

        <!--新增会员-->
        <LineChart v-if="!loading" />
      </div>

      <!--成交会员占比-->
      <!-- <Pie v-if="!loading" /> -->
    </div>

    <!--排行榜-->
    <Ranking v-if="!loading" />
  </div>
</template>

<script>
import DataApi from '@/api/data.js'
import Total from './part/Total.vue'
import LineChart from './part/LineChart.vue'
import Ranking from './part/Ranking.vue'

export default {
  components: {
    Total,
    LineChart,
    Ranking
  },
  data() {
    return {
      /* 是否正在加载 */
      loading: true,
      /* 数据对象 */
      dataModel: {}
    }
  },
  provide: function() {
    return {
      dataModel: this.dataModel
    }
  },
  created() {
    this.getData()
  },
  methods: {
    /** 获取数据 **/
    getData() {
      const self = this
      DataApi.getUserTotal({}, true)
        .then(res => {
          Object.assign(self.dataModel, res.data)
          self.loading = false
        })
        .catch(() => {})
    }
  }
}
</script>

<style scoped="scoped">
  .statistics-member .bd-box {
    border-top: 1px solid #EEEEEE;
  }
  .statistics-member .left-box {
    width: 100%;
  }
</style>
